<template>
	<view class="selectProject">
		<view class="">
				<view class="dataList">
					<view class="dataList_title flexjsbac">
						<text>选择加钟项目</text>
					</view>
					<view class="technicianList flex" v-for="(item1, index) in technicianList" :key="index">
						<u-checkbox-group>
							<u-checkbox 
							    @change="checkboxChange($event,item1)"
								v-model="formData[item.key1]" 
								size='circle'
							>
							</u-checkbox>
							</u-checkbox-group>
						<image class="img" :src="baseImgUrl + 'img_common_tech.png'" alt="" />
						<view class="flex1">
							<view class="technicianName">
								{{item1.name}}
							</view>
							<view class="list_con">
									{{item1.fwxm}}
								<text style="color:#F98203;margin-right:10rpx">详情>></text>
							</view>
							<view class="flex discount ">
								<view>
									<text class="discount_de">89￥</text>
									<text>会员价
									</text>
								</view>
								<text>249￥原价</text>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default{
		name:'SelectProject',
		data(){
			return{
				baseImgUrl: pageConfig.baseImgUrl,
				formData:[],
				addd:true,
				technicianList:[
					{
						name:'08号何燕',
						fwxm:'颈肩按摩90分钟',
						yysj:'2023-04-07 13：20-14：20',
						status:0,
						money:249.00,
						id:1
					},
					{
						name:'08号何燕',
						fwxm:'颈肩按摩90分钟',
						yysj:'2023-04-07 13：20-14：20',
						status:0,
						money:249.00,
						id:2
					},
				]
					
				
			}
		},
		methods:{
			checkboxChange(e,item){
				if(e){
					this.formData.push(item)
				}else{
					let el = this.formData.find(itm => itm.id === item.id);
					if (el) this.formData.splice(this.formData.indexOf(el), 1);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.selectProject{
		margin: 30rpx;
		.dataList{
			margin-bottom: 30rpx;
			background: #fff;
			border-radius:17rpx;
			.bottom_con{
				border-top: 1px solid #E6E6E6;
				height: 122rpx;
				padding: 24rpx;
			}
			.dataList_title{
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;
				border-bottom: 1px solid #E6E6E6;
				padding: 24rpx;
			}
			.technicianList{
				padding: 24rpx;
				border-bottom: 1px solid #E6E6E6;
				.technicianName{
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 43.44rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
				}
				.discount{
					color: #666666;
					font-size: 18rpx;
					font-weight: 400;
					align-items: flex-end;
					view{
						display: flex;
						align-items: flex-end;
						margin-right: 10rpx;
					}
					.discount_de{
						font-size: 40rpx;
						font-weight: 700;
						color: #FE4D4F;
						text-align: center;
						vertical-align: top;
					}
				}
				.list_con{
					margin: 15rpx 0;
				}
				.img{
					width: 128rpx;
					height: 128rpx;
					margin-right: 24rpx;
				}
			}
		}
	}
	
</style>